Skip to main content

Charting with Highcharts

The current frontend scaffold includes Highcharts 10.3.3 and highcharts-react-official 2.2.2. Use the versions in the generated package.json; do not downgrade a new app to the older Highcharts 8 dependency documented by legacy examples.

Licensing

Third-party developers and development organizations are responsible for obtaining the Highcharts license required for their own development and distribution. Corva does not provide an OEM Highcharts license for customer applications.

Keep chart options stable​

Highcharts option trees can be expensive to recreate. Derive them with useMemo from only the data and settings that affect the chart.

import { useMemo } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

export function DepthChart({ records }) {
  const options = useMemo<Highcharts.Options>(() => ({
    chart: { animation: false },
    title: { text: undefined },
    xAxis: { title: { text: 'Measured depth' } },
    yAxis: { title: { text: 'Value' } },
    series: [
      {
        type: 'line',
        name: 'Hole depth',
        data: records.map(record => [record.timestamp, record.data.hole_depth]),
      },
    ],
  }), [records]);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
    />
  );
}

Resize with the app​

Corva apps can be resized or maximized. Size the chart's container with CSS and call chart.reflow() or setSize() when a layout change cannot be observed automatically. Avoid tying chart dimensions only to the browser viewport—the app occupies a container inside the dashboard.

Initialize modules once​

Some Highcharts features require modules. Initialize them once at module scope, before rendering charts:

import Highcharts from 'highcharts';
import ExportingModule from 'highcharts/modules/exporting';

ExportingModule(Highcharts);

Do not initialize a module inside the React component or on every render.

Drilling and completion guidance​

  • Use the current well.asset_id as the query boundary for drilling charts.
  • For completion charts, normalize well and wells, then apply the current pad-mode selection.
  • Sort historical records before rendering and define how live records are appended or replaced.
  • Limit points or aggregate data when the selected time/depth range is large.
  • Keep units and series visibility in app settings when customers should retain those choices.
  • Add explicit loading, empty, and error states outside the chart.

Use the Highcharts API reference for chart-specific options and Access Corva Data for the request lifecycle.